<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div ng-app="app" ng-controller="locatorController" class="location-finder">
    <ng-map zoom="14" center="28.435285, 77.112911">
      	<!-- <marker ng-repeat="p in markers" position="{{p.pos}}" title="{{p.flight_name}}"></marker> -->
      	<!-- <shape  name="polyline"
	      stroke-color="#FF0000"
          stroke-opacity="0.8"
	      stroke-weight="2"
	      path="{{path}}">
	    </shape> -->

	    <shape ng-repeat="shape in allShapes"
       name="{{shape.name}}"
       stroke-color="#FF0000"
       stroke-opacity="0.8"
       path="{{shape.path}}"
       paths="{{shape.paths}}"
       bounds="{{shape.bounds}}"
       center="{{shape.center}}"
       radius="{{shape.radius}}"
       stroke-weight="2"></shape>
    </ng-map>

    <ul class="location-list">
      <li ng-repeat="location in map.markers" ng-class="{selected: location == map.window.model}" ng-click="map.window.model = location">
        Location #{{location.id}} is at: ({{location.latitude}}, {{location.longitude}})
      </li>
    </ul>
    <br>
    <span>window:{{map.window}}</span>
  </div>

  <div ng-controller="templateController">
  	Template ID: {{parameter.id}}
</div>

  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js" charset="utf-8"></script>
  <!-- // <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.js" charset="utf-8"></script> -->
  <!-- // <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.1.0-X.5/angular-google-maps.js" charset="utf-8"></script> -->
 <script src="//rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
  <script src="http://maps.google.com/maps/api/js"></script>
  <script src="app.js"></script>

</body>

</html>


